<template>
  <div>
    <div class="rect" style="top:788px;height:257px"></div>
    <div class="wrap">
      <div class="kq-table">
        <div class="flex-row-start-start">
          <div class="kq-table-id table-title-style">编号</div>
          <div class="kq-table-title table-title-style">气库区名称</div>
          <div class="kq-table-time table-title-style">数据更新时间</div>
        </div>
        <div style="margin-top: 12px">
          <div v-for="(item,index) in kqList" :key="item.name" class="table-unit flex-row-center-center" >
            <div class="kq-table-id  table-unit-value1">{{index+1}}</div>
            <div class="kq-table-title  table-unit-value1">{{item.name}}</div>
            <div class="kq-table-time">
              <router-link :to="{name:'overview',query:{name:'index',selTab:'库区概览',selType:'历史状态',selKq:selQk,showJz:showJz}}">
                <div class="  table-unit-value2" >{{item.updateTime}}</div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="corner-wrap1">
      <div class="corner-content1"></div>
    </div>
    <div class="corner-wrap4 flex-row-end-start">
      <div class="corner-content4"></div>
    </div>
    <div class="corner-wrap2">
      <div class="corner-content2"></div>
    </div>
    <div class="corner-wrap3 flex-row-end-start">
      <div class="corner-content3"></div>
    </div> -->
  </div>
</template>
<script>
export default {
    data(){
        return {
            tableData: [
            {id: 1,title: "刘庄",time:'2020年8月12日'},
            {id:2,title:'金坛',time:'2020年3月14日'},
            {id:3,title:'库区3',time:'2019年5月23日'}
            ]
        }
    },
    props:{
      selQk:String,
      kqList:Array,
      showJz:Boolean,
    },
    watch: {

    }
};
</script>
<style scoped>
.table-unit-value1 {
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: SourceHanSansSC-regular;
}
.table-unit-value2 {
  color:black;
  font-size: 14px;
  text-align: center;
  font-family: SourceHanSansSC-regular;
}
.table-unit {
  height: 44px;
  line-height: 20px;
  background-color: transparent;
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  /* border: 1px solid rgba(255, 255, 255, 100); */
}
.table-title-style {
  height: 20px;
  color: black;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  font-family: SourceHanSansSC-regular;
}
.kq-table-id {
  width: 20%;
}
.kq-table-title {
  width: 30%;
}
.kq-table-title {
  width: 35%;
}
.kq-table-time {
  width: 45%;
}
.kq-table {
  margin-top: 28px;
  margin-left: 41px;
  margin-right: 28px;
}
.wrap {
  width: 100%;
  height: 252px;
  line-height: 20px;
  opacity: 0.82;
  background-color:  transparent;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(255,157,160, 60);
  font-family: Roboto;
  border: 1px solid  #c5565a;
}
.corner-wrap1 {
  margin-left: -2.5px;
  margin-top: -254.5px;
  z-index: 10;
}
.corner-wrap2 {
  margin-left: -2.5px;
  margin-top: 237px;
  z-index: 10;
}
.corner-wrap3 {
  margin-right: -2.5px;
  margin-top: -10.5px;
  z-index: 10;
}
.corner-wrap4 {
  margin-right: -2.5px;
  margin-top: -10px;
  z-index: 10;
}
</style>